<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在线聊天</title>
<style>
  body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #f5f5f5;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: transparent;
  }

  .chat-container {
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    overflow: hidden;
    width: 90%;
    max-width: 800px; /* 根据您的要求，我将宽度设置为最大800px */
    margin: auto;
  }

  .chat-header {
    background-color: #007bff;
    color: white;
    padding: 10px 15px;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }

  .chat-box {
    padding: 15px;
    height: 400px; /* 根据需要调整高度 */
    overflow-y: auto;
  }

  .message {
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start;
  }

  .user-avatar,
  .bot-avatar {
    width: 50px;
    height: 50px;
    margin-right: 10px;
  }
  .user-avatar {
    border-radius: 50%;
  }

  .user-message,
  .bot-message {
    padding: 10px;
    border-radius: 10px;
    max-width: 70%; /* 调整消息宽度 */
  }

  .user-message {
    background-color: #e6e6ff;
    color: #333;
    margin-left: auto;
    align-self: flex-end;
  }

  .bot-message {
    background-color: #dbf5f6;
    color: #333;
  }

  .input-container {
    padding: 10px;
    background-color: #e9e9e9;
    display: flex;
    width: 100%;
    border-top: 1px solid #ddd;
  }

  .input-container input[type="text"] {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 20px;
    margin-right: 10px;
    background-color: #fff;
    /* 限制输入框宽度，使其不超过聊天容器宽度 */
    max-width: calc(100% - 132px); /* 100% - (按钮宽度 + 右侧间距) */
  }

  .input-container input[type="text"]:focus {
    outline: none;
    box-shadow: 0 0 0 2px #007bff;
  }

  button {
    padding: 10px 20px;
    border: none;
    border-radius: 20px;
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s ease;
  }

  button:hover {
    background-color: #0056b3;
    background-size: cover;
  }
</style>
</head>
<body>
  <div class="chat-container">
    <div class="chat-header">人工客服</div>
    <div class="chat-box" id="chat-box"></div>
    <div class="input-container">
      <input type="text" id="user-input" placeholder="请输入您的消息..." onkeydown="sendMessage(event)">
      <button onclick="sendMessage()">回车</button>
    </div>
  </div>
  <script>
    function sendMessage(event) {
      var userInput = document.getElementById("user-input").value.trim();
      if (userInput === "" || event.key !== 'Enter') return;

      var chatBox = document.getElementById("chat-box");
      var userMessage = '<div class="message user-message">' +
                        '<img src="./img/leim.jpg" alt="User Avatar" class="user-avatar">' +
                        '<div class="message-content">' +
                          '<div class="user-name">You</div>' +
                          '<div class="message-text">' + userInput + '</div>' +
                        '</div>' +
                      '</div>';

      chatBox.innerHTML += userMessage;
      chatBox.scrollTop = chatBox.scrollHeight;

      var apiUrl = 'https://api.ownthink.com/bot?appid=xiaosi&userid=user&spoken=' + encodeURIComponent(userInput);

      fetch(apiUrl)
        .then(response => response.json())
        .then(data => {
          var botMessage = '<div class="message bot-message">' +
                           '<img src="./img/bot.png" alt="Bot Avatar" class="bot-avatar">' +
                           '<div class="message-content">' +
                           '<div class="user-name">bot</div>' +
                           '<div class="message-text">' + data.data.info.text + '</div>' +
                           '</div>' +
                           '</div>';
          chatBox.innerHTML += botMessage;
          chatBox.scrollTop = chatBox.scrollHeight;
        })
        .catch(error => console.error('错误:', error));

      document.getElementById("user-input").value = "";
      event.preventDefault(); // 阻止回车键默认的换行行为
    }
  </script>
</body>
</html>
